<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
  <nz-form-item>
    <nz-form-label [nzSpan]="6" nzRequired>
      {{ 'BasicArchives::ModelTitle:Joy.Erp.BasicArchives.Staff.Department.DisplayName' | abpLocalization }}
    </nz-form-label>
    <nz-form-control [nzSpan]="16" nzHasFeedback [nzErrorTip]="errorTpl">
      <input 
        nz-input 
        formControlName="displayName" 
        [placeholder]="'BasicArchives::ModelPlaceHolder:Joy.Erp.BasicArchives.Staff.Department.DisplayName' | abpLocalization" 
      />
    </nz-form-control>
  </nz-form-item>
</form>
<ng-template #errorTpl let-control>
  <ng-container *ngIf="control.hasError('required')">
    {{ 'BasicArchives::UI:Validation:Required' | abpLocalization }}
  </ng-container>
  <ng-container *ngIf="control.hasError('maxlength')">
    {{ 'BasicArchives::UI:Validation:MaxLength' | abpLocalization: control.getError('maxlength').requiredLength }}
  </ng-container>
</ng-template>

<div *nzModalFooter>
  <button nz-button nzType="default" (click)="cancelForm()">
    {{ 'BasicArchives::UI:SimplyTree.RefEntity.Cancel' | abpLocalization }}
  </button>
  <button nz-button nzType="primary" (click)="submitForm()" [disabled]="!validateForm.valid">
    {{ 'BasicArchives::UI:SimplyTree.RefEntity.Submit' | abpLocalization }}
  </button>
</div> 